<template>
	<view class="active">
		<view class="all">
			<view style="text-align: center;font-size: 15rpx;color: #ccc;">
				<hlUploadImg ref="hlUploadImg">
				</hlUploadImg>
				<text style="font-size: 18px;color: #000000;position: relative;right: 150rpx;">副图</text>
				<text>好的照片能帮您更快促进交易</text>
			</view>
		</view>
		<view class="anchor">
			<view class="ao">
				<view class="bold">
					铺号
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入铺号" v-model="puhao"/>
					</view>
				</view>
			</view>
		
			<view class="appp">
				<view class="bold">
					租金
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入租金" v-model="zuj"/>
					</view>
				</view>
			</view>
		
			<view class="appp">
				<view class="bold">
					合同
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入合同" v-model="hetong"/>
					</view>
				</view>
			</view>
		
			<view class="appp">
				<view class="bold">
					压付方式
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入压付方式" v-model="yafus"/>
					</view>
				</view>
			</view>
		
			<view class="appp">
				<view class="bold">
					装修期
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入装修期" v-model="zxq"/>
					</view>
				</view>
			</view>
		
			<view class="appp">
				<view class="bold">
					递增
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="递增" v-model="dz"/>
					</view>
				</view>
			</view>
		</view>
		<view class="hljs-attribute">
			<view class="ao">
				<view class="bold">
					水费
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入水费" v-model="water"/>
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					电费
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入电费" v-model="df"/>
					</view>
				</view>
			</view>
		
			<view class="appp">
				<view class="bold">
					物业费/能耗费
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入物业费" v-model="wyf"/>
					</view>
				</view>
			</view>
			
			<view class="appp">
				<view class="bold">
					停车费
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入停车费" v-model="stopCar"/>
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					垃圾费
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入垃圾费" v-model="laji"/>
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					进深
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="进深" v-model="jinshen"/>
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					经营状态
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入经营状态" v-model="jyzt"/>
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					经营时间
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入经营时间" v-model="jytime"/>
					</view>
				</view>
			</view>
		</view>
		<view class="banter">
			<view class="boolean">
				<view class="booor" v-for="(item,index) in lists" :key="index" @click="select(item,index)" :class="currentIndex==index?'fised':''">{{item}}</view>
			</view>
			<view class="boo">
				<view class="booor" :class="currentIndexs== index?'fised':''" v-for="(item,index) in list" :key="index" @click="selected(item,index)">{{item}}</view>
			</view>
			<view class="boo">
				<view class="booor" v-for="(item,index) in listss" :key="index" @click="selectedd(item,index)" :class="currentIndexss== index?'fised':''">{{item}}</view>
			</view>
		</view>
		<view class="box5" @click="huan">
			立即发布
		</view>
	</view>
</template>

<script>
	import hlUploadImg from "@/components/hl-uploadImg/hlUploadImg.vue";
		import instance from '../../api/requset.js'
	export default {
		components: {
			hlUploadImg
		},
		data() {
			return {
				title: 'picker',
				array: ['请选择', '长沙', '株洲', '湘潭'],
				att:['请选择','雨花区', '芙蓉区', '天心区', '开福区'],
				timi:['请选择','1楼', '2楼', '3楼', '4楼'],
				juan:['请选择','普通装修', '精装修', '豪华装修'],
				arr:['请选择','一梯一户', '一梯两户', '一梯三户','两梯三户'],
				test:['请选择','一梯一户', '一梯两户', '一梯三户','两梯三户'],
				sites:['请选择','一梯一户', '一梯两户', '一梯三户','两梯三户'],
				temewa:['请选择','一梯一户', '一梯两户', '一梯三户','两梯三户'],
				list:['上水','下水','排烟','排污'],
				lists:['天然气','电话/网络','暖气','扶梯'],
				listss:['管煤','380V','可明火','外摆区'],
				currentIndex:0,
				currentIndexs:0,
				currentIndexss:0,
				index: 0,
				kuan:true,
				puhao:'',//铺号
				zuj:'',//租金,
				hetong:'',//合同
				yafus:'',//压付方式
				zxq:'',//装修期
				dz:'',//递增
				water:'',//水费,
				df:'',//电费
				wyf:'',//物业费
				stopCar:'',//停车费
				laji:'',//垃圾费
				jinshen:'',//进深
				jyzt:'',//经营状态
				jytime:'',//经营时间
				yafu:'',//压付
				name:'',//名称
				address:'',//地址
				floor:'',//楼层
				ztype:'',//类型
				htype:'',//户型
				kuan:'',//面宽
				// zujin:'',//租金
				total:'',//总价值
				area:'',//所属区域,
				dasha:'',//所属大厦
				matching:''
			};
		},
	
		onLoad(option) {
			this.yafu=option.yafu,//压付
			this.name=option.name,//名称
			this.address=option.address,//地址
			this.floor=option.floor,//楼层
			this.ztype=option.ztype,//类型
			this.htype=option.htype,//户型
			this.kuan=option.kuan,//面宽
			this.zujin=option.zujin,//租金
			this.total=option.total,//总价值
			this.area=option.area,//所属区域,
			this.dasha=option.dasha//所属大厦
		},
		methods: {
			select(item,index){
				console.log(item,index,"选择")
				this.currentIndex = index
				this.matching = item
			},
			selected(item,index){
				console.log(item,index,"选择")
				this.currentIndexs = index
			},
			selectedd(item,index){
				console.log(item,index,"选择")
				this.currentIndexss = index
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			huan(){
				var serverUrl = instance.serverUrl
				uni.request({
				    url: serverUrl + '/index.php/api/Member/Release?id=1', //仅为示例，并非真实接口地址。
					method:'POST',
					data:{
						memberid:7,
						building_id:1,
						title:this.name,
						region:this.area,
						address:this.address,
						floor:this.floor,
						house_type:this.htype,
						miankuan:this.kuan,
						jingying:this.jyzt,
						jingyingtime:this.jytime,
						pay_mode:this.yafu,
						renovation:this.zxq,
						incrementa:this.dz,
						hydropower:this.df,
						property:this.wyf,
						parking:this.stopCar,
						zujing:this.zujin,
						hetong:this.hetong,
						puhao:this.puhao,
						fwtype:this.ztype,
						in_depth:this.jinshen,
						division:'0',//分割
						sheung_shui:'1',//上水
						garbagefe:this.laji,
						waterfe:this.water,
						zhuang_type:this.ztype,
						zhu_url:'',
						practical:'80%',
						sales_type:0,
						url:'',
						zongjia:this.total,
						matching:this.matching
					},
					header: { 'content-type': 'application/x-www-form-urlencoded', },
				    success: (res) => {
				        console.log(res.data.data,"发布房源")
				    },
				})
			},
			ayar(){
				this.kuan = !this.kuan
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
	}
	input{
		color: #000000;
	}
	.anchor {
		width: 95%;
		height: 510rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	
	.boot {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 5rpx;
		left: 10rpx;
	}
	
	.ao,
	.box4 {
		display: flex;
	}
	.ao,
	.appp {
		justify-content: space-between;
		position: relative;
		top: 30rpx;
		margin: 0 20rpx 0 20rpx;
	}
	
	.appp {
		display: flex;
		margin-top: 40rpx;
	}
	
	.box1 {
		color: #A1A1A1;
	}
	.hljs-attribute{
		width: 95%;
		height: 640rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.banter{
		width: 95%;
		height: 330rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.beter{
		position: relative;
		top: 30rpx;
		left: 20rpx;
		color: #104DA1;
	}
	.box5{
		width: 80%;
		margin-left: 10%;
		margin-top: 100rpx;
		border-radius: 20rpx;
		height: 80rpx;
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		font-size: 30rpx;
		background-color: #0958A9;
		margin-bottom: 30rpx;
	}
	.boolean{
		display: flex;
		justify-content: space-between;
		padding-top: 60rpx;
		margin: 0 20rpx 0 20rpx;
	}
	.booor{
		height: 50rpx;
		width: 150rpx;
		border: solid 1rpx #ccc;
		text-align: center;
		line-height: 50rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #4D4D4D;
	}
	.boo{
		display: flex;
		justify-content: space-between;
		margin: 20rpx 20rpx 0 20rpx;
	}
	.fised{
		background-color: #1058A7;
		color: #FFFFFF;
	}
	.all {
		width: 95%;
		height: 300rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
</style>
